<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>tab</title>
</head>
<style>
a {
    display: inline-block;
    line-height: 30px;
    width: 100px;
    text-decoration: none;
    background: #1296db;
    color: #fff;
    text-align: center;
}

ul {
    list-style: none;
}

ul>li {
    width: 400px;
    height: 300px;
    border: 1px dashed red;
    display: none;
}
</style>

<body>
    <!-- 划过切换 延迟切换 点击切换 自动切换 -->
    <!-- 函数封装 -->
    <a href="javascript:" id="a1">aa</a>
    <a href="javascript:" id="a2">bb</a>
    <a href="javascript:" id="a3">cc</a>
    <a href="javascript:" id="a4">dd</a>
    <ul>
        <li style="display: block;">AA</li>
        <li>bb</li>
        <li>cc</li>
        <li>dd</li>
    </ul>
    <script>
    var ar = document.getElementsByTagName('a');
    var lr = document.getElementsByTagName('li');
    for (var i = 0; i < ar.length; i++) {
        ar[i].index = i;
        ar[i].onmouseover = function() {
            clearInterval(timer);
            console.log(i);
            for (var j = 0; j < lr.length; j++)
                if (j == this.index) {

                    lr[j].style.display = 'block'
                    console.log('' + i + j);
                } else {
                    lr[j].style.display = 'none'
                    console.log(j);
                }
        }
        ar[i].onmouseleave = function() {
            var ind = this.index;
            timer = setInterval(function() {
                ind++;
                if (ind == 4) {
                    ind = 0;
                }
                for (var j = 0; j < 4; j++) {
                    if (j == ind) {
                        lr[ind].style.display = 'block'
                    } else {
                        lr[j].style.display = 'none'

                    }
                }
            }, 2000);
        }
    }

    // 
    // 默认事件阻止onclick事件???
    // 
    // 定时器中 this总指向window 前面用一个变量接收需要的this或者变量...

    // var timer = null;
    // for (var i = 0; i < ar.length; i++) {
    //     ar[i].index = i;
    //     ar[i].onclick = function() {
    //         console.log(i);
    //         var aaa=this;
    //         console.log(aaa.index);
    //         if (timer)
    //             clearTimeout(timer);
    //         var timer = setTimeout(function() {
    //         	console.log(this);
    //             for (var j = 0; j < lr.length; j++)
    //                 if (j == aaa.index) {
    //                     console.log(this.index);
    //                     console.log(aaa.index);
    //                     lr[aaa.index].style.display = 'block'

    //                     console.log('' + i + j);
    //                 } else {
    //                     lr[j].style.display = 'none'
    //                     console.log(j);
    //                 }
    //         }, 1000);
    //     }
    // }
    // 
    var ind = 0;
    var timer = null;
    timer = setInterval(function() {
        ind++;
        if (ind == 4) {
            ind = 0;
        }
        for (var j = 0; j < 4; j++) {
            if (j == ind) {
                lr[ind].style.display = 'block'
            } else {
                lr[j].style.display = 'none'

            }
        }
    }, 2000);
    </script>
</body>

</html>